<template>
    <div>
        <h1>添加居民</h1>
        <table class="table table-border">
            <tr>
                <td>头像</td>
                <td>
                    <input type="file" @change="changeimg">
                    <img :src="state.photo" alt="" width="100px" height="100px">
                </td>
            </tr>

            <tr>
                <td>楼栋</td>
                <td>
                    <input type="text" v-model="state.area">
                </td>
            </tr>

            <tr>
                <td>房间号</td>
                <td>
                    <select v-model="state.houseNo">
                        <option value="">==请选择==</option>
                        <option value="101">101</option>
                        <option value="102">102</option>
                        <option value="103">103</option>
                        <option value="104">104</option>
                        <option value="105">105</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>姓名</td>
                <td>
                    <input type="text" v-model="state.name">
                </td>
            </tr>

            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" :value="false" v-model="state.sex">男
                    <input type="radio" name="sex" :value="true" v-model="state.sex">女
                </td>
            </tr>

            <tr>
                <td>民族</td>
                <td>
                    <input type="text" v-model="state.nation">
                </td>
            </tr>

            <tr>
                <td>籍贯</td>
                <td>
                    <input type="text" v-model="state.where">
                </td>

            </tr>

            <tr>
                <td>证件</td>
                <td>
                    <input type="text" v-model="state.card">
                </td>
            </tr>

            <tr>
                <td>手机号</td>
                <td>
                    <input type="text" v-model="state.phone">
                </td>
            </tr>

            <tr>
                <td>类型</td>
                <td>
                    <select v-model="state.type">
                        <option value="">==请选择==</option>
                        <option :value="1">业主</option>
                        <option :value="2">租户</option>

                    </select>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="button" value="增加" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { useStore } from '../stores/user';
let store = useStore()
let router = useRouter();
let route = useRoute();

let data: any = reactive({
    state: {

        "photo": "",
        "area": "",
        "houseNo": "",
        "name": "",
        "sex": true,
        "nation": "",
        "where": "",
        "card": "",
        "phone": "",
        "type": 0,

    },
});
let { state } = toRefs(data)

const changeimg = (e: any) => {
    let obj = e.target.files[0];
    let f = new FormData();
    f.append("file", obj);
    axios({
        url: '/api/JuMin/PostUploadImgs',
        method: 'post',
        data: f
    }).then((res) => {
        if (res.data.code == 1002) {
            alert(res.data.msg);
            return;
        }
        if (res.data.code == 1001) {
            alert(res.data.msg);
            return;
        }
        state.value.photo = 'https://localhost:7197'+res.data.data;

    })
}

const add = () => {
    if (state.value.name == "") {
        alert('姓名必填')
        return;
    }
    if (state.value.area == "") {
        alert('楼栋必填')
        return;
    }
    if (state.value.houseNo == "") {
        alert('房号必填')
        return;
    }

    let obj = {
        photo: state.value.photo,
        area: state.value.area,
        houseNo: state.value.houseNo,
        name: state.value.name,
        sex: state.value.sex,
        nation: state.value.nation,
        where: state.value.where,
        card: state.value.card,
        phone: state.value.phone,
        type: state.value.type,
    }
   
    axios({
        url:'/api/JuMin/AddJM',
        method:'post',
        data:obj
    }).then((res)=>{
        if(res.data.data==1)
    {
        alert("添加成功")
        
    }
    else{
        alert("添加失败")
        return;
    }
       
    })
}
</script>

<style scoped></style>